<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            @row-dblclick="rowClick">
          <el-table-column
              fixed
              prop="ip"
              label="IP">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态">
            <template slot-scope="scope">
              <el-tag v-show="scope.row.status === true" type="success">在线</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <about-view ref="AboutView"></about-view>
  </div>
</template>

<script>
import AboutView from "@/views/AboutView.vue";
export default {
  components: {
    AboutView
  },
  data() {
    return {
      tableData: [],
    }
  },
  created() {
    window.runtime.EventsOn("clientsAdd", (data) => {
      this.tableData.push({ip: data.Ip, status: data.Online})
    })
    window.runtime.EventsOn("clientsUpdate", (data) => {
      this.tableData.forEach((item, index) => {
        if (item.ip === data.Ip) {
          this.tableData.splice(index, 1)
          this.$refs.AboutView.close(item.ip)
        }
      })
    })
  },
  methods: {
    //行被双击
    rowClick(row, column, event) {
      this.$refs.AboutView.showDialog(row.ip)
    }
  }
}
</script>

<style scoped>

</style>